<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>事件考评</a-breadcrumb-item>
      <a-breadcrumb-item>详情</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="content" v-if=false>
      <a-row style="width: 100%">
        <a-col :span="5" class="mt10">
          <span>上报人姓名：</span>
          <span>{{ formInfo && formInfo.reporterName }}</span>
        </a-col>
        <a-col :span="5">
          <span>上报人电话：</span>
          <span>{{ formInfo && formInfo.reporterPhone }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>上报时间：</span>
          <span>{{ formInfo && formInfo.reportTime }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>接受公开信息：</span>
          <span>{{ formInfo && formInfo.isPublic ? "接受" : "不接受" }}</span>
        </a-col>
      </a-row>
      <a-row style="width: 100%">
        <a-col :span="5" class="mb10 mt10">
          <span>关联对象类型</span>
          <span>{{ formInfo && formInfo.road }} </span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>关联对象：</span>
          <span>{{ formInfo && formInfo.relatedObjectName }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>关联路段：</span>
          <span>{{ formInfo && formInfo.road }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>事发网格：</span>
          <span>{{ formInfo && formInfo.noDetail ? "是" : "否" }}</span>
        </a-col>
        <a-col :span="4" class="mb10 mt10">
          <span>责任网格：</span>
          <span>{{ formInfo && formInfo.isFeedback ? "是" : "否" }}</span>
        </a-col>
      </a-row>
      <a-row style="width: 100%">
        <a-col :span="5" class="mb10 mt10">
          <span>计时区域：</span>
          <span>{{ formInfo && formInfo.issueType }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>问题对象类型：</span>
          <span>
            <!-- {{ getRelatedObjectDisplay() }} -->
          </span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>关联对象：</span>
          <span> {{ formInfo && formInfo.relatedObjectName }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>问题等级：</span>
          <span>{{
            (
              issueLevelList.find(
                (item) => item.value === formInfo.issueLevel
              ) || {}
            ).label
          }}</span>
        </a-col>
      </a-row>
      <a-spin :spinning="isDataLoading">
        <div class="grid-cards-container" v-if="mapData.length > 0">
          <div
            v-for="(item, index) in mapData"
            :key="index"
            class="grid-card"
            :bordered="false"
          >
            <div class="card-header">
              <a-avatar icon="user" style="background-color:#0052d9" />
              <span class="title-card">所属网格</span>
              <a-icon type="question-circle" class="help-icon" />
            </div>

            <div class="card-content">
              <div class="info-item">
                <span class="label">网格负责人：</span>
                <span class="value">{{ item.manager }}</span>
              </div>
              <div class="info-item">
                <span class="label">责任部门：</span>
                <span class="value">{{ item.deptName || "" }}</span>
              </div>
              <div class="info-item">
                <span class="label">责任网格：</span>
                <span class="value">{{ item.heritageZone }}</span>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
      <a-row style="width: 100%">
        <a-col :span="5" class="mb10 mt10">
          <span>紧急程度：</span>
          <span>{{
            (
              urgencyLevelList.find(
                (item) => item.value === formInfo.urgencyLevel
              ) || {}
            ).label
          }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>限时处理：</span>
          <span>{{ formInfo.deadlineTime }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>任务类型：</span>
          <span>{{ formInfo.relatedActionTypeName }}</span>
        </a-col>
        <a-col :span="5" class="mb10 mt10">
          <span>关联任务：</span>
          <span>
            <!-- {{ -->
            // ( // relatedTasksList.find( // (item) => item.value ===
            formInfo.relatedTasksId // ) || {} // ).label || ""
            <!-- }} -->
          </span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" class="luyin-style">
          <span>来电录音：</span>
          <audio controls class="audio-style">
            <source
              src=""
              type="audio/ogg"
              v-decorator="['mp3Link', { rules: [{ required: false }] }]"
            />
          </audio>
        </a-col>
        <a-col :span="24" class="luyin-style">
          <span>附加录音：</span>
          <audio controls class="audio-style">
            <source
              src=""
              type="audio/ogg"
              v-decorator="['otherMp3Link', { rules: [{ required: false }] }]"
            />
          </audio>
        </a-col>
        <a-col :span="24" class="mb10">
          <span>问题描述：</span>
          <span>{{ formInfo.issueDescription }}</span>
        </a-col>
        <a-col :span="24" class="mb10">
          <!-- 查看详情模式下只显示文件预览 -->
          <div class="attachment-preview">
            <div
              v-if="fileList && fileList.length > 0"
              class="file-preview-container"
            >
              <div
                v-for="(file, index) in fileList"
                :key="index"
                class="file-preview-item"
              >
                <!-- 图片文件显示预览 -->
                <a-card
                  :bodyStyle="{ padding: '8px' }"
                  style="width: 150px; margin-bottom: 10px"
                  hoverable
                >
                  <img
                    v-if="file.url && isImageFile(file.url)"
                    :src="file.url"
                    :alt="file.name"
                    class="preview-image"
                    @click="() => previewFile(file.url)"
                  />
                  <div
                    v-else
                    class="document-preview"
                    @click="() => previewFile(file.url)"
                  >
                    <a-icon
                      :type="getFileIcon(file.name || file.url)"
                      style="font-size: 32px"
                    />
                    <p class="file-name">
                      {{ getFileName(file.name || file.url) }}
                    </p>
                  </div>
                </a-card>
              </div>
            </div>
            <div v-else class="no-attachments">
              <a-empty description="暂无附件" />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-row>
      <a-card title="上报对象信息" class="mb20">
        <a-descriptions :column="1">
          <a-descriptions-item label="上报人姓名">
            {{ form.caseRecord.reporterName }}
          </a-descriptions-item>
          <a-descriptions-item label="上报人电话">
            {{ form.caseRecord.reporterPhone }}
          </a-descriptions-item>
          <a-descriptions-item label="上报时间">
            {{ form.caseRecord.reportTime }}
          </a-descriptions-item>
          <a-descriptions-item label="接受公开信息">
            {{ form.caseRecord.isPublic == true ? "接受" : "不接受" }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card title="巡查对象信息" class="mb20">
        <a-descriptions :column="1">
          <a-descriptions-item label="关联对象类型">
            {{ form.caseRecord.relatedObject }} -
            {{ form.caseRecord.relatedObjectMini }}
          </a-descriptions-item>
          <a-descriptions-item label="关联对象">
            <!-- {{ getObjectName(form.caseRecord.relatedObjectId) }} -->
            {{ form.caseRecord.relatedObjectName }}
          </a-descriptions-item>
          <!-- <a-descriptions-item label="巡查类型">
            {{ getName(form.caseRecord.inspectionType, inspectTypeList) }}
          </a-descriptions-item> -->
          <a-descriptions-item label="关联路段">
            {{ form.caseRecord.community }}{{ form.caseRecord.road
            }}{{ form.caseRecord.houseNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="事发网格">
            {{ form.caseRecord.heritageZoneName }}
          </a-descriptions-item>
          <a-descriptions-item label="责任网格">
            {{ form.caseRecord.responsibleNetworkUserName }}
          </a-descriptions-item>
          <a-descriptions-item label="计时区域">
            <!-- {{ form.caseRecord.timedArea }} -->
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card class="mb20">
        <div slot="title">
          <div class="flex">
            <div class="mr20">上报问题信息</div>
            <div class="flex">
              <div class="mr5 greenDot"></div>
              <div>
                {{ getName(form.caseRecord.eventStatus, eventStatusList) }}
              </div>
            </div>
          </div>
        </div>
        <a-descriptions :column="1">
          <a-descriptions-item label="问题来源">
            <!-- {{ getName(form.caseQuestion.issueSource, sourceList) }} -->
            {{ form.caseQuestion.issueSource }}
          </a-descriptions-item>
          <a-descriptions-item label="问题类型">
            <!-- {{ getName(form.caseQuestion.issueType, questionTypeList) }} -->
            {{ form.caseQuestion.issueType }}
          </a-descriptions-item>
          <a-descriptions-item label="问题等级">
            <!-- {{ getName(form.caseQuestion.issueLevel, questionLevelList) }} -->
            {{
              form.caseQuestion.issueLevel == 2
                ? "严重"
                : form.caseQuestion.issueLevel == 3
                ? "重大"
                : "一般"
            }}
          </a-descriptions-item>
          <a-descriptions-item label="紧急程度">
            {{ getName(form.caseQuestion.urgencyLevel, urgentList) }}
          </a-descriptions-item>
          <a-descriptions-item label="截止时间">
            {{ form.caseQuestion.deadlineTime }}
          </a-descriptions-item>
          <a-descriptions-item label="上传材料">
            <span
              class="blue pointer"
              @click="preview(form.caseQuestion.materialLink)"
              >点击预览 {{ form.caseQuestion.materialLink }}</span
            >
          </a-descriptions-item>
          <a-descriptions-item label="问题描述">
            {{ form.caseQuestion.issueDescription }}
          </a-descriptions-item>
          <!-- <a-descriptions-item label="立案条件">
            {{ form.caseQuestion.closeCondition }}
          </a-descriptions-item> -->
        </a-descriptions>
      </a-card>
      <a-card title="案件进度信息" class="mb20">
        <a-steps :current="form.status">
          <a-step title="暂存" />
          <a-step title="上报" />
          <a-step title="直接办结" />
        </a-steps>
      </a-card>
      <a-card title="案件派遣信息" class="mb20">
        <a-descriptions :column="1">
          <a-descriptions-item label="派遣类型">
            Zhou Maomao
          </a-descriptions-item>
          <a-descriptions-item label="派遣部门">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="派遗部门">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="派遣时间">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="派遣说明">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card title="案件跟踪信息" class="mb20">
        <a-descriptions :column="1">
          <a-descriptions-item label="核实人">
            Zhou Maomao
          </a-descriptions-item>
          <a-descriptions-item label="核实时间">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="上报说明">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="延期时间">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="延期说明">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="延期申请审核人">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="延期申请审核时间">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card title="案件归档信息" class="mb20">
        <a-descriptions :column="1">
          <a-descriptions-item label="结案时间">
            Zhou Maomao
          </a-descriptions-item>
          <a-descriptions-item label="结案资料">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
          <a-descriptions-item label="结案说明">
            {{ form.relatedObjectId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <div class="justify_center" style="gap: 10px">
        <a-button @click="$router.go(-1)">返回</a-button>
        <a-button
          type="primary"
          disabled=""
          v-if="this.form.caseQuestion.urgencyLevel === 'URGENT'"
          >已设为急要件</a-button
        >
        <a-button @click="handleDo('URGENT')" type="primary" v-else
          >设为急要件
        </a-button>
        <a-button
          @click="handleDo('PRIORITY')"
          v-if="this.form.caseQuestion.urgencyLevel === 'PRIORITY'"
          type="primary"
          >督办
        </a-button>
        <a-button type="primary" e-else disabled="">已督办</a-button>
      </div>
    </a-row>
  </div>
</template>
<script>
import dictMixin from "@/mixins/dictMixin";

export default {
  mixins: [dictMixin],
  data() {
    return {
      isDataLoading: false,
      menuList: [
        { label: "全部", value: null },
        { label: "遗产保护", value: "HERITAGE_PROTECTION" },
        { label: "经营准入", value: "OPERATION_ACCESS" },
        { label: "保护建设", value: "CONSERVATION_DEVELOPMENT" },
        { label: "执法检查", value: "LAW_ENFORCEMENT_INSPECTION" },
        { label: "数据维护", value: "DATA_MAINTENANCE" },
      ],
      mapData: [],
      fileList: [],
      sourceList: [],
      questionTypeList: [],
      inspectTypeList: [],
      questionLevelList: [],
      merchantList: [],
      legacyList: [],
      urgentList: [
        {
          dictValue: 0,
          dictLabel: "一般",
        },
        {
          dictValue: 1,
          dictLabel: "优先",
        },
        {
          dictValue: 2,
          dictLabel: "紧急",
        },
      ],
      moveList: [
        { label: "专项行动", value: 0 },
        { label: "联合行动", value: 1 },
      ],
      statusList: [
        {
          value: "0",
          label: "无状态",
        },
        {
          value: "1",
          label: "已上报",
        },
        {
          value: "2",
          label: "已转交",
        },
        {
          value: "3",
          label: "处理中",
        },
        {
          value: "4",
          label: "不处理",
        },
        {
          value: "5",
          label: "已处理",
        },
      ],
      loading: true,
      dialogVisible: false,
      id: null,
      eventId: null,
      form: {
        casePaiqianList: [],
        caseQuestion: {},
        caseRecord: {},
      },
      eventStatusList: [
        { dictLabel: "暂存", dictValue: "1" },
        { dictLabel: "待核实", dictValue: "2" },
        { dictLabel: "待处理", dictValue: "3" },
        { dictLabel: "已受理", dictValue: "4" },
        { dictLabel: "已驳回", dictValue: "5" },
        { dictLabel: "待派遣", dictValue: "6" },
        { dictLabel: "已派遣", dictValue: "7" },
      ],
      formInfo: {},
    };
  },
  mounted() {
    console.log(this.$route.query, "this.$route.query");
    this.eventId = this.$route.query.eventId;
    this.init();
  },
  methods: {
    async handleDo(type) {
      const url = `government-platform-center/duban/pc/setUrgentOrPiority?eventId=${this.eventId}&urgencyLevel=${type}`;
      await this.$axios.post(url).then((res) => {
        this.init();
      });
    },
    async init() {
      await this.getDict1();
      await this.getDict2();
      await this.getDict3();
      // await this.getDict4()
      await this.getDict5();
      await this.getDict6();
      await this.getDetail();
    },
    getDetail() {
      this.loading = true;
      // const url = `/government-platform-center/xunjian/patrolInspection/detail?eventId=${this.eventId}`
      const url = `/government-platform-center/case/getCaseDetail`;
      // this.$axios.get(url).then((res) => {
      //   if (res.data.code == 0) {
      //     this.form = res.data.data
      //     this.loading = false
      //   }
      // })
      this.$axios
        .post(
          url,
          { eventId: this.eventId },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.form = res.data.data;
            const { caseRecord, caseQuestion, casePaiqianList } = res.data.data;
            this.formInfo = {
              ...caseRecord,
              ...caseQuestion,
              isPublic: caseRecord && caseRecord.isPublic === 1,
              isFeedback: caseRecord && caseRecord.isFeedback === 1,
              // 确保路段信息正确映射
              road: caseRecord && caseRecord.road,
              community: caseRecord && caseRecord.community,
              baseLine: caseRecord && caseRecord.baseLine, // 兼容可能的字段名
              houseNumber: caseRecord && caseRecord.houseNumber,
              relatedActionTypeId:
                caseRecord && caseRecord.relatedActionTypeName === "日常任务"
                  ? 0
                  : 1,
            };
            console.log("this.from-caseRecord", this.form.caseRecord);
            console.log("this.from-caseQuestion", this.form.caseQuestion);
            console.log("this.from-casePaiqianList", this.form.casePaiqianList);
            this.loading = false;
          }
        });
    },
    getObjectName(val) {
      let data = [...this.merchantList, ...this.legacyList];
      console.log(val, "关联对象", data);

      const { dictLabel } = data.find((ele) => ele.id === val);
      return dictLabel || "";
    },
    preview(url) {
      window.open(url, "blank");
    },
    getBack() {},
    //字典
    //问题来源
    async getDict1() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_SOURCE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.sourceList = res.data.data;
      }
    },
    //问题类型
    async getDict2() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_TYPE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.questionTypeList = res.data.data;
      }
    },
    //巡查类型
    async getDict3() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=INSPECTION_TYPE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.inspectTypeList = res.data.data;
      }
    },
    //问题等级
    async getDict4() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=QUESTION_LEVE_CODE";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.questionLevelList = res.data.data;
      }
    },
    //商家
    async getDict5() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=merchant_code";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.merchantList = res.data.data;
      }
    },
    //遗产
    async getDict6() {
      this.loading = true;
      const url =
        "government-platform-center/dictData/queryByCode?dictType=yichan_code";
      const res = await this.$axios.get(url);
      if (res.data.code == 0) {
        this.legacyList = res.data.data;
      }
    },
    getName(id, list) {
      let name = "未知";
      list.forEach((item) => {
        if (id == item.dictValue) {
          name = item.dictLabel;
        }
      });
      return name;
    },
  },
};
</script>
<style scoped>
.content {
  background: #fff;
  border-radius: 5px;
  height: fit-content;
  padding: 20px;
}
/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

.greenDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: green;
  margin-top: 8px;
}
</style>
